<template>
  <view class="custom-search">
    <uv-search v-model="searchValue" :placeholder="placeholder" :show-action="false" :clearabled="true"
      :input-align="inputAlign" @change="onChange" @custom="onCustom" @search="onSearch" @clear="onClear">
      <template #suffix>
        <view class="search-line"></view>
        <view style="color: #78CA77;" @click="onSearch">搜索</view>
      </template>
    </uv-search>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入搜索关键词'
  },
  inputAlign: {
    type: String,
    default: 'left'
  }
})

const emit = defineEmits(['search', 'change', 'clear'])

const searchValue = ref('')

const onChange = (value) => {
  emit('change', value)
}

const onSearch = () => {
  emit('search', searchValue.value)
}

const onCustom = () => {
  onSearch()
}

const onClear = () => {
  searchValue.value = ''
  emit('clear')
}
</script>

<style lang="scss" scoped>
.custom-search {
  // padding: 10px 15px;

  :deep(.uv-search) {

    // 设置圆角为8px
    .uv-search__content {
      border-radius: 8px !important;
    }

    // 调整搜索图标位置
    .uv-search__right-icon {
      margin-right: 10px;
    }

    // 输入框样式调整
    .uv-search__field {
      height: 36px;
      line-height: 36px;
    }
  }
}

.search-line {
  width: 2rpx;
  height: 32rpx;
  background-color: #DDDCE4;
  margin-right: 20rpx;
  margin-left: 20rpx;
}
</style>